.video {
    width: 90%;
    display: block;
    margin: 2% auto;
    background: #000000;
    height: 100%;
    position: relative;
}
.play{
     display:block;
     border-radius:50%;
     width:100px;
     height:100px;
     background:url("../img/bigplay.png")no-repeat ;
     background-size: cover;
     position: absolute;
     top:33%;
     left: 42.5%;
 }
.play:hover{
    background-position:0 100%;
    cursor:pointer;
}
.video{
    height: 100%;
    position: relative;
}
.pause{
    display:none;
    border-radius:50%;
    width:100px;
    height:100px;
    background:url("../img/bigplay.png")no-repeat ;
    background-size: cover;
    position: absolute;
    top:33%;
    left: 42.5%;
}
.pause:hover{
    background-position:0 100%;
    cursor:pointer;
}
.mask{
    height: 100%;
    background:url("../img/videobackground.png")no-repeat center;
    background-size:100% 100% ;
    position: relative;
}

/*.play {
    display: block;
    border-radius: 50%;
    width: 15%;
    height: 34%;
    background: url("../img/bigplay.png") no-repeat center;
    background-size: cover;
    position: absolute;
    top: 33%;
    left: 42.5%;
}
.pause {
    display: none;
    border-radius: 50%;
    width: 15%;
    height: 34%;
    background: url("../img/bigplay.png") no-repeat center;
    background-size: cover;
    position: absolute;
    top: 33%;
    left: 42.5%;
}
.mask {
    height: 100%;
    background:url("../img/videobackground.png")no-repeat ;
    background-size: cover;
    position: relative;
}*/
.videos {
    display: none;
}
.content{
    width: 60%;
    float: right;
    padding: 2.5%;
}
.img>img{
    width: 100%;
}
.center-2{
    height: 30%;
}
/*==========*/
.content {
    width: 60%;
    float: right;
    padding: 2.5%;
}
.img > img {
    width: 100%;
}
.center-2 {
    height: 30%;
}
.line {
    display: inline-block;
    width: 6%;
    height: 20px;
    margin: 0 15px;
    background: url("../img/other/dotted_line.png") no-repeat center;
    background-size: contain;
}
.year {
    padding-left: 2%;
    color: #979797;
    font-size: 18px;
    padding-bottom: 2%;
}
.year > span {
    display: inline-block;
    padding: 0 1%;
}
.year > span:hover {
    transition: transform 0.3s;
    transition: color 0.2s;
    transform: scale(1.6);
    color: #c9ac51;
}
.years-banner{
    position:absolute;
    height: 100%;
    width: 100%;
}
.years-banner>li{
    position: absolute;
    left: 100%;
}
.background{
    overflow: hidden;
}
.center-2{
    position: relative;
    overflow: hidden;
}
/*donghua*/
@keyframes in{
    from{left:100%;}
    to{left:0}
}
@-webkit-keyframes in{
    from{left:100%;}
    to{left:0}
}
@-moz-keyframes in{
    from{left:100%;}
    to{left:0}
}
@-o-keyframes in{
    from{left:100%;}
    to{left:0}
}
@keyframes out{
    from{left:0px;}
    to{left:-100%;}
}
@-webkit-keyframes out{
    from{left:0px;}
    to{left:-100%;}
}
@-moz-keyframes out{
    from{left:0px;}
    to{left:-100%;}
}
@-o-keyframes out{
    from{left:0px;}
    to{left:100%;}
}
.years-banner .show{
    animation:in 1s;
    -webkit-animation:in 1s;
    -moz-animation:in 1s;
    -o-animation:in 1s;
    left:0px;
}
.years-banner .hide{
    animation:out 1s;
    -webkit-animation:out 1s;
    -moz-animation:out 1s;
    -o-animation:out 1s;
    left:100%;
}
.years-banner>li{
    width: 100%;
    height:100%;
    position:absolute;
    left:100%;
    top:0;
}
.css-year{
    transform: scale(1.6);
    color: #c9ac51;
}/*===============*/
.img > img {
    width: 100%;
}
.center-2 {
    height: 30%;
}
.introduce {
    width: 95%;
    margin: 0 auto;
    margin-bottom: 2%;
    text-indent: 30px;
}
.introduce-3 {
    margin-bottom: 5%;
}
.introduce-3 > div {
    background: #c8c8ca;
    width: 25%;
    height: 300px;
    display: inline-block;
    margin: 0 3%;
}
.introduce-3 > .f {
    margin-left: 6%;
}